
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>滑块集 - UIkit 中文文档</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="../vendor/holder.js"></script>
        <script src="js/docs.js"></script>
        <script src="../src/js/components/slideset.js"></script>
        <script charset="utf-8">
            jQuery(function($){
                var select = $('#slideset-animation').on('change', function(){
                    select.next('[data-uk-slideset]').data('slideset').options.animation = select.val();
                });
            });
        </script>

    </head>

    <body class="tm-background uk-form">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li><a href="core.html">核心组件</a></li>
                    <li class="uk-active"><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li class="uk-active"><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>滑块集/Slideset</h1>

                            <p class="uk-article-lead">创建条目的组和集合，并允许循环显示。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>使用这个组件需要为容器元素添加 <code>data-uk-slideset</code> 属性。添加 <code>default</code> 选项到 <code>data-uk-slideset</code> 属性，调整一个滑块集中条目的个数。</p>

                            <p><span class="uk-badge uk-badge-danger">注意</span> 此组件需要额外添加 <code>slideset.js</code> 文件，在<code>js/components</code>文件夹中。</p>
                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-margin" data-uk-slideset="{default: 4}">
                                <div class="uk-slidenav-position uk-margin">
                                    <ul class="uk-slideset uk-grid uk-flex-center">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:9/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:10/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                    <a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
                                    <a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slideset=&quot;{default: 4}&quot;&gt;
    &lt;ul class=&quot;uk-slideset&quot;&gt;
        &lt;li&gt;&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
        ...
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="navigations"><a href="#navigations" class="uk-link-reset">导航/Navigations</a></h2>

                            <p>为滑块集添加导航，只需使用 <code>uk-slideset-nav</code> 类。它将动态地创建一个基于现有滑块数量的导航。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slideset=&quot;{default: 4}&quot;&gt;
    &lt;ul class=&quot;uk-slideset&quot;&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;li&gt;...&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class=&quot;uk-slideset-nav&quot;&gt;...&lt;/ul&gt;
&lt;/div&gt;</code></pre>

                            <p>要切换相邻的滑块，使用 <code>data-uk-slideset-item</code> 属性，并设置该属性的值为 <code>next</code> 和 <code>previous</code>。这些带有 <code>data-uk-slideset-item</code> 属性的元素必须放在带有 <code>data-uk-slideset</code> 属性的容器中。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slideset=&quot;{default: 4}&quot;&gt;
    &lt;ul class=&quot;uk-slideset&quot;&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;li&gt;...&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href=&quot;&quot;data-uk-slideset-item=&quot;previous&quot;&gt;&lt;/a&gt;
    &lt;a href=&quot;&quot;data-uk-slideset-item=&quot;next&quot;&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="slide-dot-nav"><a href="#slide-dot-nav" class="uk-link-reset">滑动导航和圆点导航/Slidenav and Dotnav</a></h3>

                            <p>你可以使用 UIkit 的其他任意组件来做滑块集的导航。比如 <a href="slidenav.html">Slidenav</a> 和 <a href="dotnav.html">Dotnav</a> 可以做出像下面例子这样的导航。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-margin" data-uk-slideset="{default: 4}">
                                <div class="uk-slidenav-position uk-margin">
                                    <ul class="uk-slideset uk-grid uk-flex-center">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:9/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:10/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                    <a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
                                    <a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
                                </div>
                                <ul class="uk-slideset-nav uk-dotnav uk-flex-center"></ul>
                            </div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;div data-uk-slideset=&quot;{default: 4}&quot;&gt;
    &lt;div class=&quot;uk-slidenav-position&quot;&gt;
        &lt;ul class=&quot;uk-slideset&quot;&gt;
            &lt;li&gt;...&lt;/li&gt;
            &lt;li&gt;...&lt;/li&gt;
        &lt;/ul&gt;
        &lt;a href=&quot;&quot; class=&quot;uk-slidenav uk-slidenav-previous&quot; data-uk-slideset-item=&quot;previous&quot;&gt;&lt;/a&gt;
        &lt;a href=&quot;&quot; class=&quot;uk-slidenav uk-slidenav-next&quot; data-uk-slideset-item=&quot;next&quot;&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;ul class=&quot;uk-slideset-nav uk-dotnav uk-flex-center&quot;&gt;...&lt;/ul&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="responsive"><a href="#responsive" class="uk-link-reset">响应式条目/Responsive items</a></h2>

                            <p>滑块集支持基于条目可见性的媒体查询。只需添加一个断点选项到 <code>data-uk-slideset</code> 属性中，比如 <code>small</code>, <code>medium</code>, <code>large</code> 。并设置在该断点宽度以上的视口中你想要显示的条目数，如下面例子所示：</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-margin" data-uk-slideset="{small: 2, medium: 4, large: 6}">
                                <div class="uk-slidenav-position uk-margin">
                                    <ul class="uk-slideset uk-grid uk-flex-center">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:9/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:10/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                    <a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
                                    <a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
                                </div>
                                <ul class="uk-slideset-nav uk-dotnav uk-flex-center"></ul>
                            </div>


                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slideset=&quot;{small: 2, medium: 4, large: 6}&quot;&gt;...&lt;/div&gt;</code></pre>


                            <hr class="uk-article-divider">

                            <h2 id="animations"><a href="#animations" class="uk-link-reset">动画/Animations</a></h2>

                            <p>这里有那么多的动画可以用在滑块集里，用来显示下一批滑块。只要为 <code>data-uk-slideset</code> 添加 <code>animation</code> 选项并设置你想要的动画。动画的持续时间可以通过设置 <code>duration</code> 选项来修改。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>动画</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>fade</code></td>
                                            <td>淡入淡出</td>
                                        </tr>
                                        <tr>
                                            <td><code>scale</code></td>
                                            <td>缩放</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-horizontal</code></td>
                                            <td>水平滑入滑出</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-vertical</code></td>
                                            <td>垂直滑入滑出</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-top</code></td>
                                            <td>从顶部滑出，从顶部滑入</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-bottom</code></td>
                                            <td>从底部滑出，从底部滑入</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example - 在下拉框里选你想要预览的</h3>

                            <select id="slideset-animation">
                                <option value="fade">fade</option>
                                <option value="scale">scale</option>
                                <option value="slide-horizontal">slide-horizontal</option>
                                <option value="slide-vertical">slide-vertical</option>
                                <option value="slide-top">slide-top</option>
                                <option value="slide-bottom">slide-bottom</option>
                            </select>

                            <div class="uk-margin" data-uk-slideset="{small: 2, medium: 4}">
                                <div class="uk-slidenav-position uk-margin">
                                    <ul class="uk-slideset uk-grid uk-flex-center">
                                        <li><img src="holder.js/600x400/sky/auto/text:1/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:2/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:3/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:4/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:5/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:6/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:7/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:8/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:9/size:100" width="600" height="400" alt=""></li>
                                        <li><img src="holder.js/600x400/sky/auto/text:10/size:100" width="600" height="400" alt=""></li>
                                    </ul>
                                    <a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
                                    <a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
                                </div>
                                <ul class="uk-slideset-nav uk-dotnav uk-flex-center"></ul>
                            </div>


                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-slideset=&quot;{animation: 'scale', duration: 200}&quot;&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="filter"><a href="#filter" class="uk-link-reset">过滤/Filter</a></h2>

                            <p>你还可以使用过滤来实现只显示滑块集中特定的条目。为此，需要为每个过滤控件添加 <code>data-uk-filter</code> 属性来规定它们过滤的分类。然后还要为每个滑块条目添加 <code>data-uk-filter</code> 属性来规定它们各自属于哪个分类。</p>

                            <p><span class="uk-badge">注意</span> 过滤控件可以放在滑块集中，或者，为过滤控件添加 <code>controls</code> 选项到 <code>data-uk-slideset</code> 属性中，并将滑块集的 id 设置在该选项中。如下面的例子：</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-margin" data-uk-slideset="{animation: 'scale', medium:4}">
                                <ul class="uk-subnav uk-subnav-pill">
                                    <li data-uk-filter=""><a>All</a></li>
                                    <li data-uk-filter="filter-a"><a>Filter A</a></li>
                                    <li data-uk-filter="filter-b"><a>Filter B</a></li>
                                </ul>
                                <div class="uk-slidenav-position uk-margin">
                                    <ul class="uk-slideset uk-grid uk-flex-center">
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 1" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 2" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 3" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 4" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 5" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 6" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 7" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 8" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 9" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-a"><img src="holder.js/600x400/sky/auto/text:Filter A \n Item 10" width="600" height="400" alt=""></li>

                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 1" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 2" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 3" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 4" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 5" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 6" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 7" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 8" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 9" width="600" height="400" alt=""></li>
                                        <li data-uk-filter="filter-b"><img src="holder.js/600x400/vine/auto/text:Filter B \n Item 10" width="600" height="400" alt=""></li>
                                    </ul>
                                    <a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
                                    <a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
                                </div>
                                <ul class="uk-slideset-nav uk-dotnav uk-flex-center"></ul>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;!-- 过滤控件包含在滑块集中 --&gt;
&lt;div data-uk-slideset&gt;
    &lt;ul&gt;
        &lt;li data-uk-filter=&quot;&quot;&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li data-uk-filter=&quot;filter-a&quot;&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li data-uk-filter=&quot;filter-b&quot;&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;ul class=&quot;uk-slideset&quot;&gt;
        &lt;li data-uk-filter=&quot;filter-a&quot;&gt;&lt;img src=&quot;&quot;&gt;&lt;/li&gt;
        &lt;li data-uk-filter=&quot;filter-b&quot;&gt;&lt;img src=&quot;&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;!-- 过滤控件在滑块集外面 --&gt;
&lt;ul id="my-id"&gt;
    &lt;li data-uk-filter=&quot;&quot;&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter=&quot;filter-a&quot;&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter=&quot;filter-b&quot;&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div data-uk-slideset"{controls: '#my-id'}"&gt;
    &lt;ul class=&quot;uk-slideset&quot;&gt;
        &lt;li data-uk-filter=&quot;filter-a&quot;&gt;&lt;img src=&quot;&quot;&gt;&lt;/li&gt;
        &lt;li data-uk-filter=&quot;filter-b&quot;&gt;&lt;img src=&quot;&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript 选项</a></h2>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>选项</th>
                                            <th>可用值</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>default</code></td>
                                            <td>integer</td>
                                            <td>1</td>
                                            <td>一个滑块集中默认可见条目数</td>
                                        </tr>
                                        <tr>
                                            <td><code>small</code></td>
                                            <td>integer</td>
                                            <td>null</td>
                                            <td>小视口（small）中显示的条目数</td>
                                        </tr>
                                        <tr>
                                            <td><code>medium</code></td>
                                            <td>integer</td>
                                            <td>null</td>
                                            <td>中视口（medium）中显示的条目数</td>
                                        </tr>
                                        <tr>
                                            <td><code>large</code></td>
                                            <td>integer</td>
                                            <td>null</td>
                                            <td>大视口（large）中显示的条目数</td>
                                        </tr>
                                        <tr>
                                            <td><code>xlarge</code></td>
                                            <td>integer</td>
                                            <td>null</td>
                                            <td>特大视口（Xlarge）中显示的条目数</td>
                                        </tr>
                                        <tr>
                                            <td><code>animation</code></td>
                                            <td>string</td>
                                            <td>'fade'</td>
                                            <td>动画的名字</td>
                                        </tr>
                                        <tr>
                                            <td><code>duration</code></td>
                                            <td>integer</td>
                                            <td>200</td>
                                            <td>以毫秒为单位的动画持续时间</td>
                                        </tr>
                                        <tr>
                                            <td><code>delay</code></td>
                                            <td>integer</td>
                                            <td>100</td>
                                            <td>一个滑块集中多个条目之间的动画延时。</td>
                                        </tr>
                                        </tr>
                                        <tr>
                                            <td><code>filter</code></td>
                                            <td>string</td>
                                            <td>''</td>
                                            <td>滑块条目过滤</td>
                                        </tr>
                                        <tr>
                                            <td><code>autoplay</code></td>
                                            <td>Boolean</td>
                                            <td>false</td>
                                            <td>定义滑块集条目是否自动播放</td>
                                        </tr>
                                        </tr>
                                        <tr>
                                            <td><code>pauseOnHover</code></td>
                                            <td>Boolean</td>
                                            <td>true</td>
                                            <td>鼠标悬停在滑块集上时，赞同自动播放</td>
                                        </tr>
                                        <tr>
                                            <td><code>autoplayInterval</code></td>
                                            <td>integer</td>
                                            <td>7000</td>
                                            <td>切换滑块集条目的时间间隔</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">手动初始化</h3>

                            <pre><code>var slideset = UIkit.slideset(element, { /* options */ });</code></pre>

                            <h3>事件</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>参数</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>show.uk.slideset</code></td>
                                            <td>event, set</td>
                                            <td>滑块集显示时触发</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
